<template>
    <div class="app-container">
        <el-form :model="formInline" class="form-inline" ref="form" label-width="70px">
            <el-row :gutter="4">
                <el-col :lg="6" :xl="4"><el-form-item label="保险号" style="width:100%">
                        <el-input v-model="formInline.insureNum" placeholder="保险号"></el-input>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4"><el-form-item label="订单编号" style="width:100%">
                        <el-input v-model="formInline.orderNum" placeholder="订单编号"></el-input>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4"><el-form-item label="报案号" style="width:100%">
                        <el-input v-model="formInline.reportNum" placeholder="报案号"></el-input>
                    </el-form-item></el-col>
                <!-- <el-col :lg="9" :xl="7"><el-form-item label="报案时间">
                        <el-date-picker v-model="formInline.user" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-time="['12:00:00']">
                        </el-date-picker>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4"><el-form-item style="width:100%" label="当前节点">
                        <el-select v-model="formInline.region" placeholder="当前节点">
                            <el-option label="全部" value="all"></el-option>
                            <el-option label="通过" value="shanghai"></el-option>
                            <el-option label="不通过" value="beijing"></el-option>
                        </el-select>
                    </el-form-item></el-col> -->
                <el-col :lg="6" :xl="4">
                    <!-- <el-form-item> -->
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                    <!-- </el-form-item> -->
                </el-col>
            </el-row>
        </el-form>
        <el-table ref="table" :data="tableData">
            <el-table-column align="center" prop="reportNum" label="报案号" width="180">
                <template slot-scope="scope">
                    {{ scope.row.reportStatus == 2 ? scope.row.reportNum : '' }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="goodsName" label="货物名称" width="180">
            </el-table-column>
            <el-table-column align="center" prop="containerNumber" label="出险箱号" width="180">
            </el-table-column>
            <el-table-column align="center" prop="lossFee" label="损失金额">
            </el-table-column>
            <el-table-column align="center" prop="sceneName" label="现场联系人">
            </el-table-column>
            <el-table-column align="center" prop="scenePhone" label="联系方式">
            </el-table-column>
            <el-table-column align="center" prop="goodsName" label="当前节点">
                <template slot-scope="scope">
                    {{ getLabel(ReportStatus, scope.row.reportStatus) }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="reportPlace" label="出险地址">
            </el-table-column>
            <el-table-column align="center" prop="reportCause" label="出险原因">
            </el-table-column>
            <el-table-column align="center" prop="explain" label="损失情况说明">
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看</el-button>
                    <el-button size="mini" v-if="scope.row.reportStatus == 1" type="text" icon="el-icon-view"
                        @click="confirmFiling(scope.row)">确认立案</el-button>
                    <el-button size="mini" v-if="scope.row.reportStatus == 2" type="text" icon="el-icon-view"
                        @click="cancelFiling(scope.row)">取消立案</el-button>
                    <el-button size="mini" v-if="scope.row.reportStatus == 3" type="text" icon="el-icon-view"
                        @click="confirmCancelFiling(scope.row)">确认取消立案</el-button>
                    <el-button size="mini" v-if="scope.row.reportStatus == 4" type="text" icon="el-icon-view"
                        @click="confirmVerification(scope.row)">确认核验</el-button>
                    <el-button size="mini" v-if="scope.row.reportStatus == 5" type="text" icon="el-icon-view"
                        @click="cancelVerification(scope.row)">取消核验</el-button>
                    <el-button size="mini" v-if="scope.row.reportStatus == 5" type="text" icon="el-icon-view"
                        @click="confirmPayment(scope.row)">确认付款</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-document" @click="followingClick(item.orderNum)">跟踪</el-button> -->
                    <!-- <el-button v-if="scope.row.status !== '通过'" size="mini" type="text" icon="el-icon-document-checked"
                        @click="examine(scope.row)">审核</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
            :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
        <view-or-examine ref="viewOrExamine"></view-or-examine>
        <el-dialog title="确认立案" :visible.sync="showConfirmFiling">
            <el-form ref="confirmFilingForm" :rules="rules" :model="confirmFilingForm">
                <el-form-item label="报案号" prop="reportNum">
                    <el-input v-model="confirmFilingForm.reportNum"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showConfirmFiling = false">取 消</el-button>
                <el-button type="primary" @click="confirmFilingFunc">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="确认核赔" :visible.sync="showCompensation">
            <el-form ref="confirmCompensationForm" :rules="rulesCompensation" :model="confirmCompensationForm">
                <el-form-item label="赔付金" prop="reportPayMoney">
                    <el-input v-model="confirmCompensationForm.reportPayMoney"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showCompensation = false">取 消</el-button>
                <el-button type="primary" @click="confirmVerificationFun">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getLabel } from '@/utils/func.js'
import viewOrExamine from './viewOrExamine.vue';
import { ReportStatus } from '@/utils/options'
export default {
    components: { viewOrExamine },
    data() {
        return {
            showConfirmFiling: false,
            getLabel,
            ReportStatus,
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            currentPage4: 4,
            formInline: {
                insureNum: '',
                orderNum: '',
                reportNum: ''
            },
            tableData: [],
            tableHeight: 0,
            confirmFilingForm: {
                reportNum: ''
            },
            row: {},
            rules: {
                reportNum: [
                    { required: true, message: '请输入报案号', trigger: 'blur' },
                ]
            },
            rulesCompensation: {
                reportPayMoney: [
                    { required: true, message: '请输入赔付金', trigger: 'blur' },
                ]
            },
            confirmCompensationForm: {
                reportPayMoney: ''
            }
        }
    },
    methods: {
        confirmFiling(row) {
            this.row = row
            this.showConfirmFiling = true
        },
        confirmFilingFunc() {
            this.$refs.confirmFilingForm.validate((valid) => {
                if (valid) {
                    const params = {
                        orderNum: this.row.orderNum,
                        reportNum: this.confirmFilingForm.reportNum
                    }
                    this.$post(`/warranty/report/confirmReport`, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.showConfirmFiling = false
                            this.getTableData();
                        }
                    });
                }
            });

        },
        cancelFiling(row) {
            const params = {
                orderNum: row.orderNum
            }
            this.$confirm("是否取消立案?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(`/warranty/report/cancelReport`, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.getTableData();
                        }
                    });
                })
                .catch(() => {
                    //
                });
        },
        confirmCancelFiling(row) {
            const params = {
                orderNum: row.orderNum
            }
            this.$confirm("是否确认取消立案?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(`/warranty/report/confirmcancelReport`, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.getTableData();
                        }
                    });
                })
                .catch(() => {
                    //
                });
        },
        confirmVerification(row) {
            this.showCompensation = true
            this.row = row
           
        },
        confirmVerificationFun() {
            const params = {
                orderNum: this.row.orderNum,
                reportPayMoney: this.confirmCompensationForm.reportPayMoney
            }
            this.$confirm("是否确认核验?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(`/warranty/report/confirmCheck`, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.getTableData();
                        }
                    });
                })
                .catch(() => {
                    //
                });
        },
        cancelVerification(row) {
            const params = {
                orderNum: row.orderNum
            }
            this.$confirm("是否取消核验?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(`/warranty/report/cancelCheck`, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.getTableData();
                        }
                    });
                })
                .catch(() => {
                    //
                });
        },
        confirmPayment(row) {
            const params = {
                orderNum: row.orderNum
            }
            this.$confirm("是否确认付款?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(`/warranty/report/confirmPay`, params).then((res) => {
                        if (res && res.code * 1 === 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!",
                            });
                            this.getTableData();
                        }
                    });
                })
                .catch(() => {
                    //
                });
        },
        onSubmit() {
            this.page.pageNum = 1
            this.getTableData()
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            this.page.pageNum = val
            this.getTableData()
        },
        view(row) {
            this.$refs.viewOrExamine.dialogFormVisible = true
            this.$refs.viewOrExamine.title = '查看'
            this.$refs.viewOrExamine.row = row;
            this.$refs.viewOrExamine.followingClick(row.orderNum);
            this.$refs.viewOrExamine.isExamine = false
        },
        examine() {
            this.$refs.viewOrExamine.dialogFormVisible = true
            this.$refs.viewOrExamine.title = '审核'
            this.$refs.viewOrExamine.isExamine = true
        },
        setTableHeight() {
            this.$nextTick(() => {
                const queryConditionHeight = this.$refs.form.$el.offsetHeight
                this.tableHeight = (window.innerHeight - queryConditionHeight - 180) + 'px'
            })
        },
        getTableData() {
            const params = {
                ...this.form,
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize
            }
            this.$get('warranty/report/list', params).then(res => {
                this.tableData = res.rows
                this.page.total = res.total
            })
        }
    },
    mounted() {
        this.getTableData()
        this.setTableHeight()
    }
}
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
    width: 100%;

    .el-form-item__label {
        // padding: 0;
    }
}
</style>
